<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="">数字A</label>
        <input v-model.number="num1" type="number">
      </div>
      <div>
        <label for="">操作符</label>
        <select v-model="oprate" name="" id="">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
      </div>
      <div>
        <label for="">数字B</label>
        <input v-model.number="num2" type="number">
      </div>
      <div>
        <button>计算</button>
      </div>
      <div>
        结果：{{ result }}
      </div>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <!-- <script src="./main.js" type="module"></script> -->
  <script>
    // 计算器类
    class Operation {
      constructor (num1, num2) {
        this.num1 = num1
        this.num2 = num2
      }
      // 如果是传统的面向对象，这里要有一个抽像方法，然后由子类具体实现
    }

    class OprationAdd extends Operation {
      constructor (num1, num2) {
        super(num1, num2)
      }
      getResult () {
        return this.num1 + this.num2
      }
    }

    class OprationSub extends Operation {
      constructor (num1, num2) {
        super(num1, num2)
      }
      getResult () {
        return this.num1 - this.num2
      }
    }

    class OprationMul extends Operation {
      constructor (num1, num2) {
        super(num1, num2)
      }
      getResult () {
        return this.num1 * this.num2
      }
    }

    class OprationDiv extends Operation {
      constructor (num1, num2) {
        super(num1, num2)
      }
      getResult () {
        return this.num1 / this.num2
      }
    }

    // 工厂出来了
    class OprationFactory {
      static createOprate (oprate) {
        let oper = null // 存储具体的操作实例（Add、Div）
        switch (oprate) {
          case '+':
            oper = new OprationAdd()
            break;
          case '-':
            oper = new OprationSub()
            break;
          case '*':
            oper = new OprationMul()
            break;
          case '/':
            oper = new OprationDiv()
            break;
        }
        return oper
      }
    }
    
    new Vue({
      el: '#app',
      data: {
        num1: 0,
        num2: 0,
        result: 0,
        oprate: '+'
      },
      methods: {
        handleSubmit() {
          const oper = OprationFactory.createOprate(this.oprate)
          oper.num1 = this.num1
          oper.num2 = this.num2
          this.result = oper.getResult()
        }
      }
    })

  </script>
</body>

</html>
